<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>便民服务-身份证信息验证</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">		
		<link rel="stylesheet" href="../../css/waves.min.css">
	</head>
	<style type="text/css">
		body{overflow-y: auto;}	
	   .mui-content{position:absolute;top:0;left: 0;height:100%;background:url(../../images/service/idcrad_pic.png)  no-repeat; background-size:100% 200px;}
	   .mui-content .mui-title{color: #fff;}
	   .mui-bar{background: none;}
	   .mui-content{background-color: #fff;}
	   .mui-content .idCard{margin:200px auto 0px auto;}
	   .mui-content .idCard>h3{color: #666; height: .8rem; line-height: .8rem; background-color: #f5f5f5; font-size: .32rem; padding-left: .3rem; box-sizing: border-box;}
	   .idCard .ico_card{display: inline-block; vertical-align: middle; margin:-.05rem .1rem 0 0; width: .5rem; height: .48rem; background: url(../../images/service/s_ico01.png) no-repeat; background-size:cover;}
	   .mui-input-group:before,.mui-input-group:after{background: none;}
	   .mui-input-group{margin: .5rem 0px 0px .2rem;}
	   .mui-input-group .mui-input-row{height: .88rem; line-height: .88rem;}
	   .mui-input-row label{font-size: .3rem; color: #999999; padding: .33rem; box-sizing: border-box;}
	   .mui-input-group .mui-input-row:after{background-color:#e5e5e5; left: 5px;}
	   .mui-input-row label~input{font-size: .3rem; color: #999999;height: .88rem; line-height: .88rem;}
	   .mui-input-row .input-code{width: 40%; float: left;}
	   .mui-input-row .phone_code>img{display: block; width: 1.33rem; height: .63rem; float: right; margin: .1rem .1rem 0px 0px;}
	   button[type=button]{margin: .6rem .25rem .6rem .05rem; color: #fff; width:7rem; padding: .25rem 0px; background-color: #ff7800; font-size: .32rem; border: none;}
	   .mui-input-group .ico_code{background: url(../../images/service/s_ico02.png) no-repeat; display: inline-block; vertical-align: middle; width: .34rem; height: .38rem; background-size: cover; margin: 0px .1rem 0px 0px;}	   
	   #yzmys .mui-input-clear~.mui-icon-clear{right:1.66rem !important;}
	</style>
	<body>
		<!-- 头部导航start -->
		<!--<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">返回</a>
		    <h1 class="mui-title">公交路线</h1>
		</header>-->
		<!-- 头部导航end -->			
		<!-- 主体start -->
		<div class="mui-content">		
			<!-- 身份证验证start -->
			<div class="idCard">
			    <h3><i class="ico_card"></i>身份证信息验证</h3>
			    <form class="mui-input-group">
			        <div class="mui-input-row">
			            <label>姓名：</label>
			            <input type="text" id="realName" class="mui-input-clear" placeholder="请输入姓名">
			        </div>
			        <div class="mui-input-row">
			            <label>身份证号码：</label>
			            <input type="text" id="idCard" class="mui-input-clear" placeholder="请输入身份证号码">
			        </div>
			        <div class="mui-input-row" id="yzmys">
			            <label>验证码：</label>
			            <input type="text" id="code" class="mui-input-clear input-code" placeholder="请输入验证码">
			            <div class="phone_code"><img src="" /></div>
			        </div>
			        <a id="submitInfo" class="waves-effect waves-button waves-float" style="background-color: #ff7800;height: 45px;color:#fff;width: 7rem;line-height: 18px;margin-top:50px;">验证信息</a>
			    </form>
			</div>
			<!-- 身份证验证end -->
		</div>
		<!-- 主体end -->
	</body>
	<script src="../../js/mui.min.js"></script><!-- mui -->
	<script src="../../js/common.js"></script><!-- 共用rem适配-js -->
	<script src="../../js/jquery2.2.4.min.js"></script>	<!-- jquery -->
	<script src="../../js/waves.min.js"></script>
	<script type="text/javascript">
		var code = '';
		mui.plusReady(function(){
			getVeriCode();
		})
		//获取验证码图片
		function getVeriCode(){
			utils.showWaiting() //显示等待框
			code = randomCode();
			utils.ajax('appCommon/codeImg.do',function(data){
				var data = JSON.parse(data);
				if (data.state == '1') {
					document.querySelector('.phone_code img').setAttribute('src',utils.HOST + data.img);
				} else {
					mui.toast(data.msg);
				}
				closeWaitingAndShowView();
			},'code='+code,null,function(){
				mui.toast('抱歉，当前服务不可用，请稍后再试');
				closeWaitingAndShowView();
			})
		}
		
		//点击图片重新获取验证码
		document.querySelector('.phone_code img').addEventListener('tap',function(){
			getVeriCode();
		})
		
		var subDate;
		/**
		 * 提交
		 */
		document.getElementById('submitInfo').addEventListener('tap', function() {
			//姓名
			var realName = document.getElementById("realName").value.trim();
			//身份证
			var idCard =	document.getElementById('idCard').value.trim();
			//验证码
			var confirmCode = document.getElementById('code').value.trim();
			
			if(realName==null || realName==""){
				mui.toast("请输入姓名");
				return false;
			}
			if(realName.length>4||realName.length<2){
				mui.toast("请输入真实姓名");
				return false;
			}
			if(idCard==null || idCard==""){
				mui.toast("请输入身份证");
				return false;
			}else{
				if(!isIDCard(idCard)){
					mui.toast("请输入正确的身份证信息");
					return false;
				}
			}
			
			if(confirmCode == null || confirmCode ==""){
				mui.toast("请输入验证码");
				return false;
			}
			if (confirmCode.toLowerCase() != code.toLowerCase()) {
				mui.toast("验证码不正确");
				return false;
			}
			
			if(subDate){
				var curDate=new Date();
				var sec=Math.floor((curDate.getTime()-subDate.getTime())/1000);
				if(sec<30){
					mui.toast("请勿频繁操作，请等待"+(30-sec)+"秒");
					return false;
				}
			}
			
			subDate=new Date(); 
           	var param = 'realName='+ realName+'&idCard='+idCard;			
			utils.ajax('appHttpIds/idCardVerifyQuery.do', function(data) {
				data = JSON.parse(data);
				if(data.code == '0' || data.code == 0){//验证成功
					mui.alert(data.result,'验证结果');
					getVeriCode();
					return;
				}else if(data.code == '1' || data.code == 1){//验证失败
					mui.toast(data.result);
					getVeriCode();
					return;
				}
			}, param);
		});
		
		Waves.displayEffect();
	</script>
</html>
